import React,{useState} from 'react'
import {render} from 'react-dom'
import './index.scss'

function Index () {
    const Url = [
        'https://desk-fd.zol-img.com.cn/t_s720x360c5/g2/M00/00/0B/ChMlWV6yJnaIRdmuABBMcYzkKbAAAO3-QN3iYQAEEyJ861.jpg',
        'https://desk-fd.zol-img.com.cn/t_s720x360c5/g2/M00/0A/0F/ChMlWV6fqYmIZlNfACW8VBU1G5AAAOg-AIafXEAJbxs677.jpg',
        'https://desk-fd.zol-img.com.cn/t_s720x360c5/g2/M00/05/00/ChMlWl6NMMaID4bLACAO63Y8jjQAAOJfgB9PNcAIA8D706.jpg'
    ]
    const [url, setUrl] = useState(Url[1])
    const [scale, setScale] = useState(1)
    let i = 0;
    let ma = 1;
    let mi = 1;

    function cut() {
        i += 1;
        var len = url.length;
        if(i >= len){
            i = 0
        }
        setUrl(Url[i])
    }
    function max() {
        ma += 0.1;
        setScale(ma)
    }
    function min() {
        mi -= 0.1;
        setScale(mi)
    }
    function old() {
        setScale(1)
    }

    return (
        <div className="img-out">
            <div className="img-head">
                <span onClick={cut}>-></span>
                <span onClick={max}>+</span>
                <span onClick={min}>-</span>
                <span onClick={old}>[1:1]</span>
            </div>
            <img src={url} alt="png" style={{transform: `scale(${scale})`}}/>
        </div>
    );
}

render(<Index />, document.getElementById('main'))